<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="/html/js/axios.min.js"></script>
    <script src="/html/js/ajax.js"></script>
    <script src="/html/js/layui.js"></script>
    <script src="/html/js/util.js"></script>
    <link rel="stylesheet" href="/html/js/css/layui.css" media="all">
    <title>处理订单</title>
</head>
<script>
    window.onload = function () {
        showTable(1)
    }

    async function showTable(pageNo) {
        let orderStatue;
        let array = document.getElementsByName("orderStatue");
        for (let i = 0; i < array.length; i++) {
            if (array[i].selected) {
                orderStatue = array[i].value;
            }
        }

        let params = {
            pageNo: pageNo,
            orderStatue: orderStatue,
            startDate: $("startDate").value,
            endDate: $("endDate").value
        }
        let pages = await ajaxGet("/order/findByPagePro", params);
        let info = pages.list;
        let str = "";
        for (let i = 0; i < info.length; i++) {
            let obj = info[i];
            str += `<tr>
                <td>${obj.orderId}</td>
                <td>${obj.orderAllPrice}</td>
                <td>${obj.orderStatue}</td>
                <td>${obj.orderDate}</td>
                <td><a href="/html/manager/orderInfo.html?orderId=${obj.orderId}">查看详情</a></td>
                </tr>`;
        }
        $("bodys").innerHTML = str;

        let cutStr = "<div style='display: flex;justify-content: center'>";
        for (let i = 1; i <= pages.pages; i++) {
            cutStr += `<a style="margin: 10px" href="javascript:showTable(${i})">${i}</a>`
        }
        cutStr += "</div>";
        $("cutPageDiv").innerHTML = cutStr;
    }


</script>

<body style="padding-top: 50px">
<div style="display: flex;justify-content: center">
    <div style="width: 50%;">
        <table class="layui-table">
            <colgroup>
                <col width="150">
                <col width="200">
                <col>
            </colgroup>
            <thead>
            <tr>
                <th>订单号</th>
                <th>订单总价</th>
                <th>订单状态</th>
                <th>下单时间</th>
                <th>订单详情</th>
            </tr>
            </thead>
            <tbody id="bodys">
            </tbody>
        </table>
    </div>
</div>

<!--页码显示-->
<div id="cutPageDiv">

</div>

<div style="padding:0 30px;display: flex;justify-content: center">
    <div>
        <label class="layui-form-label">选择框</label>
        <div class="layui-input-block">
            <select lay-verify="required">
                <option name="orderStatue" value="不限" selected>不限</option>
                <option name="orderStatue" value="未发货">未发货</option>
                <option name="orderStatue" value="发货中">发货中</option>
                <option name="orderStatue" value="已完结">已完结</option>
            </select>
        </div>
        <br>
        <label class="layui-form-label">起始日期</label>
        <input type="date" id="startDate" required lay-verify="required"
               autocomplete="off"
               class="layui-input" style="width: 200px">
        <br>
        <label class="layui-form-label">结束日期</label>
        <input type="date" id="endDate" required lay-verify="required"
               autocomplete="off"
               class="layui-input" style="width: 200px">
        <br>
        <button type="button" class="layui-btn" onclick="showTable(1)">查询</a></button>
    </div>
</div>


</body>
</html>